<!DOCTYPE html>
<html lang="en">
<head>
    <!-- <%-- 个人设置页面 --%> -->
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="shortcut icon" href="images/icon.ico" type="/image/x-icon"/>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/main.css">
    <title>Settings - Orders Management Display System</title>
</head>
<body>
<main>
    <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" data-bs-scroll="true" data-bs-backdrop="false"
         tabindex="-1" style="width: 20%;min-width: 150px">
        <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
            <span class="fs-4">Orders Management Display System</span>
        </a>
        <hr>
        <ul class="nav nav-pills flex-column mb-auto">
            <li class="nav-item">
                <a href="overview.html" class="nav-link link-dark" aria-current="page">
                    Overview
                </a>
            </li>
            <li>
                <a href="account.html" class="nav-link link-dark">
                    Accounts
                </a>
            </li>
            <li>
                <a href="manage.html" class="nav-link link-dark">
                    All Orders
                </a>
            </li>

            <li>
                <a href="query.html" class="nav-link link-dark">
                    Orders Query
                </a>
            </li>
            <li>
                <a href="echarts.html" class="nav-link link-dark">
                    Chart Display
                </a>
            </li>
            <li>
                <a href="file.html" class="nav-link link-dark">
                    File
                </a>
            </li>
        </ul>
        <hr>
        <div class="dropdown">
            <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle"
               id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
                <strong id="user-name-text"></strong>
            </a>
            <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
                <li><a class="dropdown-item" href="setting.html">Settings</a></li>
                <li>
                    <hr class="dropdown-divider">
                </li>
                <li class="dropdown-item" id="logout">
                    Logout
                </li>
                <li hidden id="current-user-id"></li>
            </ul>
            <script type="text/javascript">
                const logoutButton = document.getElementById('logout')
                logoutButton.addEventListener("click", function () {
                    const request = new XMLHttpRequest()
                    request.onreadystatechange = function () {
                        if (request.readyState === 4 && request.status === 200) {
                            const json = JSON.parse(request.responseText)
                            if (json.errorCode !== "00000") {
                                alert(json.message)
                            }
                            window.location.href = "/"
                        } else if (request.readyState === 4 && request.status !== 200) {
                            alert(request.status)
                        }
                    }

                    request.open("POST", "/api/user/logout", true)
                    request.send()
                })

                window.onload = function () {
                    sendCurrent()
                }

                function sendCurrent() {
                    const request = new XMLHttpRequest()
                    const usernameText = document.getElementById('user-name-text')
                    const userIdText = document.getElementById('current-user-id')
                    request.onreadystatechange = function () {
                        if (request.readyState === 4 && request.status === 200) {
                            const json = JSON.parse(request.responseText)
                            if (json.errorCode !== undefined) {
                                alert(json.message)
                                window.location.href = "/"
                                return
                            }
                            usernameText.innerHTML = json.username
                            userIdText.innerHTML = json.id
                        } else if (request.readyState === 4 && request.status !== 200) {
                            alert(request.status)
                        }
                    }

                    request.open("POST", "/api/user/current", true)
                    request.send()
                }
            </script>
        </div>
    </div>


    <div class="flex-column p-4 flex-grow-1 allow-rolling">
        <h1 class="flex-column">Settings</h1>
        <div class="dropdown-divider"></div>
        <h4 class="flex-row">
            <div class="flex-column btn-group-vertical">
                <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#edit-username">Edit
                    Username
                </button>
                <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#edit-password">Edit
                    Password
                </button>
            </div>
        </h4>
        <br>
        <h1 class="flex-column">About</h1>
        <hr>
        <p>This project are developed by <strong class="text-primary"><i>Team BluePen</i></strong>.</p>
    </div>

    <div class="modal fade" id="edit-username">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Username</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning">
                        Notice:
                        <br>If you don't want to change the username, please just leave it blank.
                    </div>
                    <label for="edit-username-input"></label>
                    <input type="text" class="form-control text-input" name="edit-username" id="edit-username-input"
                           placeholder="Type a new username...">
                </div>

                <div class="modal-footer">
                    <div class="btn-group">
                        <button type="submit" class="btn btn-primary" data-bs-dismiss="modal" id="edit-username-confirm">Confirm</button>
                        <button type="reset" class="btn btn-outline-secondary">Reset</button>
                        <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="edit-password">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Password</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning">
                        Notice:
                        <br>If you don't want to change the password, please just leave it blank.
                    </div>
                    <label for="edit-password-input"></label>
                    <input type="password" class="form-control text-input" name="edit-password" id="edit-password-input"
                           placeholder="Type a new password...">
                </div>

                <div class="modal-footer">
                    <div class="btn-group">
                        <button type="submit" class="btn btn-primary" data-bs-dismiss="modal" id="edit-password-confirm">Confirm</button>
                        <button type="reset" class="btn btn-outline-secondary">Reset</button>
                        <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        const usernameButton = document.getElementById('edit-username-confirm')
        const passwordButton = document.getElementById('edit-password-confirm')

        usernameButton.addEventListener("click", function () {
            const request = new XMLHttpRequest()
            const username = document.getElementById('edit-username-input').value
            const userIdText = document.getElementById('current-user-id')
            request.onreadystatechange(function () {
                if (request.readyState === 4 && request.status === 200) {
                    const json = JSON.parse(request.responseText)
                    if (json.errorCode !== "00000") {
                        alert(json.message)
                    }
                } else if (request.readyState === 4 && request.status !== 200) {
                    alert("error: " + request.status)
                }
            })

            request.open("POST", "/api/user/edit")
            request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            request.send("id=" + userIdText.innerHTML + "&username=" + username)
        })

        passwordButton.addEventListener("click", function () {
            const request = new XMLHttpRequest()
            const password = document.getElementById('edit-password-input').value
            const userIdText = document.getElementById('current-user-id')
            request.onreadystatechange(function () {
                if (request.readyState === 4 && request.status === 200) {
                    const json = JSON.parse(request.responseText)
                    if (json.errorCode !== "00000") {
                        alert(json.message)
                    }
                } else if (request.readyState === 4 && request.status !== 200) {
                    alert("error: " + request.status)
                }
            })
            request.open("POST", "/api/user/edit")
            request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            request.send("id=" + userIdText.innerHTML + "&password=" + password)
        })

    </script>

</main>
</body>
</html>
